<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">门店返利</el-breadcrumb-item>
        <el-breadcrumb-item>返利详情</el-breadcrumb-item>
      </el-breadcrumb>

      <div>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-loading="dataLoading" label="详情" name="first">
        <base-info :detail-data="detailData" />
        <c-list :column="3">
          <c-list-item label="成品账号编码" :value="detailData.endProAccountCode" />
          <c-list-item label="成品账号名称" :value="detailData.endProAccountName" />
          <c-list-item label="定制账号编码" :value="detailData.customizedAccountCode" />
          <c-list-item label="定制账号名称" :value="detailData.customizedAccountName" />
          <!-- <c-list-item label="卖场返利核算" :value="detailData.shopAccounting" />
          <c-list-item label="门头返利核算" :value="detailData.dheadAccounting" /> -->
          <c-list-item type="textarea" label="卖场返利核算" :value="detailData.shopAccounting" />
          <c-list-item type="textarea" label="门头返利核算" :value="detailData.dheadAccounting" />

          <c-list-item label="是否涉及月返" dict-type-code="BOOLEANS" :value="detailData.isMonthReturn" />
          <c-list-item label="工程款结算是否存在异常" dict-type-code="BOOLEANS" :value="detailData.isPaymentException" />
          <c-list-item label="异常处理结果" :value="detailData.exceptionHandleResult" />

        </c-list>
        <c-section title="返利执行">
          <c-list :column="3">
            <c-list-item label="门头是否处理" dict-type-code="BOOLEANS" :value="detailData.isDheadHandle" />
            <c-list-item label="卖场硬装是否处理" dict-type-code="BOOLEANS" :value="detailData.isShopHardcoverHandle" />
            <c-list-item label="软装是否处理" dict-type-code="BOOLEANS" :value="detailData.isShopSoftwearHandle" />
            <c-list-item label="门头返利时间" :value="detailData.dheadRebateTime" />
            <c-list-item label="首返时间" :value="detailData.firstStartTime" />
            <c-list-item label="月返开始时间" :value="detailData.monthStartTime" />
            <c-list-item label="预计月返结束时间" :value="detailData.expectMonthEndTime" />
            <c-list-item label="返利是否结束" dict-type-code="BOOLEANS" :value="detailData.isRebate" />
            <c-list-item label="实际返利结束时间" :value="detailData.actualEndTime" />
          </c-list>
        </c-section>

      </el-tab-pane>
      <el-tab-pane label="验收面积明细" name="second">
        <CheckArea v-if="tableData2_0.length===0" preview :data="tableData2_1" />
        <c-permission-tabs v-else :lazy="false">
          <el-tab-pane label="本次验收区域" name="checkArea">
            <CheckArea preview :data="tableData2_1" />
          </el-tab-pane>
          <el-tab-pane label="非本次验收区域" name="noCheckArea">
            <CheckArea preview :data="tableData2_0" />
          </el-tab-pane>
        </c-permission-tabs>

      </el-tab-pane>
      <el-tab-pane label="扣款异常" name="third">
        <abnormal-deduct :id="id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CheckArea from '@/views/check/hard/execute/components/checkArea'
import abnormalDeduct from './component/abnormalDeduct.vue'
import baseInfo from './component/rebateBaseInfo.vue'
import BackPageMixin from '@/mixins/backPage'
import { getDetailById } from '@/api/shopRebate'
import { getSeriesByAccId } from '@/api/shopRebate'

export default {
  name: 'RebateDetail',
  components: { abnormalDeduct, baseInfo, CheckArea },
  mixins: [BackPageMixin],
  // props: {
  //   id: {
  //     type: String,
  //     default: ''
  //   }
  // },
  data() {
    return {
      id: '',
      tableData2_1: [],
      tableData2_0: [],
      dataLoading: false,
      detailData: {},
      activeName: 'first',
      formData: {}

    }
  },
  watch: {
    // 'detailData.hardId': {
    //   handler(v) {
    //     if (v) {
    //       getSeriesByAccId({ hardId: this.detailData.hardId, softId: this.detailData.softId }).then(res => {
    //         if (res.success === 1) {
    //           const types0 = this.handlerDataArea(res.data.filter(e => e.types === 0))
    //           const types1 = this.handlerDataArea(res.data.filter(e => e.types === 1))
    //           this.tableData = [...types1, ...types0]
    //         }
    //       })
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  async created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.dataLoading = true
      await getDetailById(this.id).then(res => {
        if (res.success === 1) {
          this.detailData = res.data
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })

      getSeriesByAccId({ hardId: this.detailData.hardId, softId: this.detailData.softId }).then(res => {
        if (res.success === 1) {
          this.tableData2_0 = this.handlerDataArea(res.data.filter(e => e.types === 0))
          this.tableData2_1 = this.handlerDataArea(res.data.filter(e => e.types === 1))
        }
      })
    }
  },
  methods: {
    // 处理区域数据
    handlerDataArea(data) {
      const t = {}
      data.forEach(e => {
        const key = e.configAreaId
        if (!t[key]) {
          t[key] = []
        }
        t[key].push(e)
      })

      // 按照方案合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.programId || item.programName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照方案合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            e.group = v
            result.push(e)
          })
        }
      }
      return result
    },
    handleClick(data) {

    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
